<template>
	<!--店铺收货地址-->
	<view class="page-content">
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--地址列表-->
			<template v-if="datalist && datalist.length > 0 ">
				<view class="body-box">
					<block v-for="(item,index) in datalist" :key="index">
						<view class="box-li" @click.stop="toSel(item)">
							<view class="box-li-l">{{item.title}}</view>
							<view class="box-li-r">
								<image class="box-li-r-icon" @click.stop="toDet('edit',item)" :src="$mAssetsPath.icon_bianji2"></image>
								<image class="box-li-r-icon2" @click.stop="toDel(item.id)" :src="$mAssetsPath.icon_shanchu"></image>
							</view>
						</view>
					</block>
				</view>
				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
		<!--弹窗-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-con">
					<view class="txt-row">是否确认删除？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getFlowLists,
		delFlowPaths
		
	} from '@/common/api.js';
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import wPopup from '@/components/w-popup/w-popup2.vue';// 弹窗
	export default {
		components: {
			loadMore,wPopup
		},
		data() {
			return {
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				datalist: [],
				page_title: '记事本',
				user_statu: {
					add_statu: false,
					replace_statu: false,
					stick_del_statu: false
				},
				params:{
					company_id:''
				},
				popselid:'',
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
		},
		onLoad(option) {
			console.log(222, option)
			this.params.company_id = this.companyInfo.id;
			this.getdata()
			
		},
		onNavigationBarButtonTap(e) {
			console.log(123, e)
			if (e.index === 0) {
				console.log(444)
				uni.navigateTo({
					url: `/pages/flow/add_flow?pageType=add`
				})
			}
		},
		methods: {
			resdata2(){
				this.getdata();
			},
			getdata(){
				getFlowLists(this.params).then(res =>{
					if(res.code === 2000){
						this.datalist = res.data;
					}
				})
			},
			toSel(item){
				this.$util.prePage().resdata2(item);
				setTimeout(() => {
					uni.navigateBack();
				}, 500)
			},
			//删除弹窗
			toDel(id){
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				this.popselid = id;
			},
			//跳转详细页
			toDet(type,item) {
				uni.navigateTo({
					url: `/pages/flow/add_flow?pageType=${type}&id=${item.id}&name=${item.title}`
				})
			},
			//删除
			deleted(e) {
				console.log(333, e)
				if (this.datalist && this.datalist.length > 0) {

				}
			},
			loadmore() {

			},
			confirm(){
				delFlowPaths({id:this.popselid}).then(res=>{
					if(res.code === 2000){
						uni.showToast({
							title:'删除成功！',
							icon:'none',
							duration:2000
						})
						this.getdata();
					}
				})
				this.showtip = false;
			},
			//取消
			cancel(){
				this.show = false
				this.showtip = false
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;
	
		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	
		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;
	
			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}
	
			.w-but-txt:last-of-type {
				border-right: none;
			}
		}
	
		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 40rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.txt-row{
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: $font-color-9;
			}
		}
	}
	.page-content {
		width: 100vw;
		height: 100%;
		background: $uni-bg-color-grey;
		border-top: 1rpx solid #f5f5f5;

		.page-body {
			display: flex;
			height: 100%;

			.body-box {
				display: flex;
				flex-direction: column;

				.box-li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					padding: 0 30rpx;
					margin-bottom: 16rpx;
					background: $uni-bg-color;
					

					.box-li-l {
						display: flex;
						align-items: center;
						width: calc(100% - 150rpx);
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
					}

					.box-li-r {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 120rpx;

						.box-li-r-icon {
							width: 30rpx;
							height: 30rpx;
						}
						.box-li-r-icon2 {
							width: 34rpx;
							height: 34rpx;
						}
					}
				}
			}
		}
	}
</style>
